import { ExclamationCircleOutlined } from '@ant-design/icons';
import { message, Spin, Tabs } from 'antd';
import confirm from 'antd/lib/modal/confirm';
import { LabeledValue } from 'antd/lib/select';
import dayjs from 'dayjs';
import React, { useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import {
	getSettings,
	getUserMsg,
	getUserWorks,
	InitUserDetail,
	IUserDetail,
	IWorkItem,
	deleteWorkById,
	getUserWorksById,
	getUserWorksDetail,
} from '../../api/threeApi';
import Footer from '../../components/Footer/Footer';
import Radio from '../Radio/Radio';
import './UserCenter.scss';

type IPropsIndex = RouteComponentProps;

export default function Community(props: IPropsIndex) {
	const [dataList, setDataList] = useState<IWorkItem[]>([]);
	const [userDetail, setUserDetail] = useState<IUserDetail>(InitUserDetail);
	const [loading, setLoading] = useState(true);

	useEffect(() => {
		getUserMsg().then((res) => {
			setUserDetail(res.data);
			fetchData(res.data.uid);
		});
	}, []);

	const fetchData = (uid: string | number) => {
		setLoading(true);
		getUserWorksById({
			offset: 0,
			limit: 10,
			uid,
		})
			.then((res) => {
				setDataList(res.items);
			})
			.catch((err) => {})
			.finally(() => setLoading(false));
	};

	return (
		<div className="content userCenter">
			<div className="d-f jc">
				<div className="w1200 br10 p-r pt28">
					<Spin spinning={loading}>
						<div className="d-f">
							<div className="d-f jc-b fd-c w240 bg-w s0 br6 mr20">
								<div className="ta-c">
									<div className="pt60">
										<img
											className="br100"
											src={userDetail.avatar || require('../../image/userCenterA.png').default}
											alt=""
										/>
									</div>
									<div className="pt32 w100 ellip1">{userDetail.name}</div>
									<div className="pt40">
										<div
											className="d-il cp bg-theme c-text-w br100 ptb8 plr24"
											onClick={() => {
												window.open(process.env.REACT_APP_BASESCRATCH, 'blank');
											}}
										>
											开始创作
										</div>
									</div>
									<div style={{ paddingTop: 100 }}>
										<div className="bg-theme2 c-theme fs18 br100 ptb8 plr24 d-il">
											<div className="d-f ac">
												<img
													className="pr16"
													src={require('../../image/edit2.png').default}
													alt=""
												/>
												我的创作
											</div>
										</div>
									</div>
								</div>
							</div>
							<div className="d-f fw" style={{ marginRight: -20 }}>
								{dataList.map((item) => (
									<div
										className="mr20 mb32 bg-w ov-h"
										style={{ borderRadius: 6 }}
										key={`work${item.id}`}
									>
										<div className="w220 h156 bg-theme2 br0 ov-h">
											<img className="w100" src={item.cover} alt="" />
										</div>
										<div className="pb8 w220">
											<div className="strong pt8 plr8">{item.name}</div>
											<div className="c-hint-b plr8 fs12">
												更新时间：{dayjs.unix(item.updated_ts).format('YYYY-MM-DD')}
											</div>
											<div className="d-f ac pt8 plr8">
												<img
													className="mr12"
													src={require('../../image/good.png').default}
													alt=""
												/>
												<span>{item.num_likes}</span>
												<img
													className="mlr12"
													src={require('../../image/eye.png').default}
													alt=""
												/>
												<span>{item.num_views}</span>
											</div>
											<div className="d-f ac pt8 bor-t b-side mt18" style={{ color: '#666666' }}>
												<div className="flex1 s0 bor-r b-side">
													<div
														onClick={() => {
															getUserWorksDetail(item.id).then((res) => {
																window.open(
																	`${process.env.REACT_APP_BASESCRATCH}?projectUrl=${res.data.url}&work=${item.id}`,
																	'_blank',
																);
															});
														}}
														className="d-f ac cp jc"
													>
														<img
															className="pr4"
															src={require('../../image/edit.png').default}
															alt=""
														/>
														<span style={{ color: 'rgb(102, 102, 102)' }}>编辑</span>
													</div>
												</div>
												<div className="flex1 s0">
													<div
														className="d-f ac cp jc"
														onClick={() => {
															confirm({
																title: '删除',
																icon: <ExclamationCircleOutlined />,
																content: '真的要删除作品吗？',
																okText: '删除',
																okType: 'danger',
																cancelText: '取消',
																onOk() {
																	return new Promise((resolve, reject) => {
																		deleteWorkById(item.id)
																			.then(resolve)
																			.catch(reject);
																	})
																		.then(() => {
																			message.success('删除成功');
																			fetchData(userDetail.uid);
																		})
																		.catch(() => message.error('删除失败，请重试'));
																},
																onCancel() {
																	console.log('Cancel');
																},
															});
														}}
													>
														<img
															className="pr4"
															src={require('../../image/delete.png').default}
															alt=""
														/>
														<span>删除</span>
													</div>
												</div>
											</div>
										</div>
									</div>
								))}
							</div>
						</div>
					</Spin>
				</div>
			</div>
			<Footer {...props} />
		</div>
	);
}
